<template>
  <div id="device-main-container" class="main-container">
    <div class="mc-left">
      <div class="mc-left-sub mc-left-1">
        <div class="sub-top">
          <div
            v-for="(item, index) in deviceTypes"
            :key="index"
            class="wc"
            :class="[
              index == 0 ? 'wc-line wc-left' : '',
              index == 1 ? 'wc-line wc-center' : '',
              index == 2 ? ' wc-right' : '',
            ]"
          >
            <div class="icon"></div>
            <span class="text">{{ item.name }}</span>
            <span class="num">{{ item.num }}</span>
          </div>
        </div>
        <div class="sub-bottom"></div>
      </div>
      <div class="mc-left-sub mc-left-2">
        <div class="sub-top">
          <h3>设备运行状态</h3>
        </div>
        <div class="sub-bottom">
          <dv-scroll-board v-if="deviceConfig" :config="deviceConfig" />
        </div>
      </div>
      <div class="mc-left-sub mc-left-3">
        <div class="sub-top">
          <h3>告警情况</h3>
        </div>
        <div class="sub-bottom">
          <dv-scroll-board v-if="alarmConfig" :config="alarmConfig" />
          <!-- <ul>
            <li style="float: left;" v-for="index in alarmConfig."
          </ul> -->
        </div>
      </div>
    </div>
    <div class="mc-center">
      <Tree
        @select="selectNode"
        ref="tree"
        :treeData="treeData"
        :selectedKeys="selectedKeys"
        :expandedKeys="expandedKeys"
        :ue4Viewer="ue4Viewer"
        :focusParam="focusParam"
      ></Tree>
    </div>
    <div class="mc-right">
      <div class="mc-left-sub mc-left-1">
        <div class="sub-top">
          <div
            v-for="(item, index) in boatDatas"
            :key="index"
            :class="[index == 0 ? 'wc wc-top' : 'wc wc-bottom']"
          >
            <div class="icon">
              <span class="text">{{ item.name }}</span>
              <span class="num">{{ item.num }}</span>
            </div>
          </div>
        </div>
        <div class="sub-bottom"></div>
      </div>
      <div class="mc-left-sub mc-left-2">
        <div class="sub-top">
          <h3>发电量</h3>
        </div>
        <div class="sub-bottom">
          <chart-block v-if="fdOption" :option="fdOption"></chart-block>
        </div>
      </div>
      <div class="mc-left-sub mc-left-3">
        <div class="sub-top">
          <h3>泄水流量</h3>
        </div>
        <div class="sub-bottom">
          <chart-block v-if="xsllOption" :option="xsllOption"></chart-block>
        </div>
      </div>
    </div>

    <div class="mc-bottom">
      <div
        class="type-item type-item-1"
        data-id="1"
        ref="item1"
        @click="deviceTypeChangeHandle"
      >
        <span class="text">泄水闸</span>
      </div>
      <div
        class="type-item type-item-2"
        data-id="2"
        ref="item2"
        @click="deviceTypeChangeHandle"
      >
        <span class="text">船闸</span>
      </div>
      <div
        class="type-item type-item-3"
        data-id="3"
        ref="item3"
        @click="deviceTypeChangeHandle"
      >
        <div class="item-left"></div>
        <div class="item-right">
          <span class="text">水轮发电机组</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import devicedatas from "@/datas/device.json";
import alarmdatas from "@/datas/alarm.json";
import fddatas from "@/datas/fddata.json";
import ChartBlock from "@components/ChartBlock";
import ModelTree from "@components/ModelTree/Index.vue";
import modeldatas from "@/datas/model.json";
import xsdatas from "@/datas/xsdata.json";
import deviceinfodatas from "@/datas/deviceinfo.json";
export default {
  name: "deviceManage",
  components: {
    ChartBlock: ChartBlock,
    Tree: ModelTree,
  },
  data() {
    return {
      boatDatas: [
        {
          name: "今日过船",
          id: 1,
          num: 23,
        },
        {
          name: "本月累计过船",
          id: 2,
          num: 325,
        },
      ],
      deviceTypes: [
        {
          name: "泄水闸",
          id: 1,
          num: 24,
        },
        {
          name: "船闸",
          id: 2,
          num: 1,
        },
        {
          name: "水轮发电机组",
          id: 3,
          num: 4,
        },
      ],
      treeData: [],
      replaceFields: { children: "child", title: "name", key: "id" },
      selectNodes: [],
      // 选中节点
      selectedKeys: [],
      //当前选中节点的节点名称
      selectedTitle: "",
      //当前选中节点的节点属性
      attrDatas: [],
      // 展开节点
      expandedKeys: [],
      // 选中节点及子阶段ue4Id
      selectUe4ids: [],
      //发电机组一
      fddata1: [],
      //发电机组二
      fddata2: [],
      //发电机组三
      fddata3: [],
      //发电机组四
      fddata4: [],
      //泄水总流量
      xssumdata: [],
      bgIconUrl: "http://192.168.10.100:3040/static/imgs/bg2.png",
      //ue4 focus参数
      focusParam: {
        distance: 5000,
      },
      // 泄水设备数据
      // devicePoints: [
      //   {
      //     id: "1582617295705944071",
      //     title: "闸室1#",
      //     list: [{
      //       name: "生产状态：",
      //       value: "正常"
      //     }, {
      //       name: "当前泄水量：",
      //       value: "80m³"
      //     }, {
      //       name: "健康状况：",
      //       value: "良好"
      //     }],
      //     tipText: "新潟县内信息那些信息，新潟县内信息那些信息，新潟县内信息那些信息",
      //     location: {
      //       x: 46841.4453125,
      //       y: 2200.912353515625,
      //       z: 2892.922607421875,
      //     },
      //   },
      //   {
      //     id: "1582617295705944078",
      //     title: "闸室2#",
      //     list: [{
      //       name: "生产状态",
      //       value: "正常"
      //     }, {
      //       name: "当泄水量",
      //       value: "99m³"
      //     }, {
      //       name: "健康状况",
      //       value: "良好"
      //     }],
      //     tipText: "新潟县内信息那些信息，新潟县内信息那些信息，新潟县内信息那些信息",
      //     location: {
      //       x: 45090.07421875,
      //       y: 2200.941162109375,
      //       z: 2892.767333984375,
      //     },
      //   },
      // ],
      //发电机组设备数据
      // fdPoints: [
      //   {
      //     id: "1582617296490278917",
      //     title: "机组 1#",
      //     list: [{
      //       name: "生产状态：",
      //       value: "正常"
      //     }, {
      //       name: "当前发电量：",
      //       value: "9999kwh"
      //     }, {
      //       name: "健康状况：",
      //       value: "良好"
      //     }],
      //     tipText: "新潟县内信息那些信息，新潟县内信息那些信息，新潟县内信息那些信息",
      //     location: {
      //       x: 2436.375244140625,
      //       y: 1990.65380859375,
      //       z: 2317.683837890625,
      //     },
      //   },
      //   {
      //     id: "1582617296490278918",
      //     title: "机组 2#",
      //     list: [{
      //       name: "生产状态",
      //       value: "正常"
      //     }, {
      //       name: "当泄水量",
      //       value: "9999kwh³"
      //     }, {
      //       name: "健康状况",
      //       value: "良好"
      //     }],
      //     tipText: "新潟县内信息那些信息，新潟县内信息那些信息，新潟县内信息那些信息",
      //     location: {
      //       x: 174.3451690673828,
      //       y: 1990.587158203125,
      //       z: 2318.053955078125,
      //     },
      //   },
      //   {
      //     id: "1582617296490278919",
      //     title: "机组 3#",
      //     list: [{
      //       name: "生产状态",
      //       value: "正常"
      //     }, {
      //       name: "当泄水量",
      //       value: "9999kwh³"
      //     }, {
      //       name: "健康状况",
      //       value: "良好"
      //     }],
      //     tipText: "新潟县内信息那些信息，新潟县内信息那些信息，新潟县内信息那些信息",
      //     location: {
      //       x: -2087.66552734375,
      //       y: 1990.6357421875,
      //       z: 2317.780517578125,
      //     },
      //   },
      //   {
      //     id: "1582939553955655681",
      //     title: "机组 4#",
      //     list: [{
      //       name: "生产状态",
      //       value: "正常"
      //     }, {
      //       name: "当泄水量",
      //       value: "9999kwh³"
      //     }, {
      //       name: "健康状况",
      //       value: "良好"
      //     }],
      //     tipText: "新潟县内信息那些信息，新潟县内信息那些信息，新潟县内信息那些信息",
      //     location: {
      //       x: -4349.5478515625,
      //       y: 1990.667724609375,
      //       z: 2317.601806640625,
      //     },
      //   },
      // ],
      //船闸设备数据
      // boatPoints: [
      //   {
      //     id: "1582617296490278929",
      //     title: "船闸#",
      //     list: [{
      //       name: "生产状态：",
      //       value: "正常"
      //     }, {
      //       name: "当前过船数量：",
      //       value: "3"
      //     }, {
      //       name: "健康状况：",
      //       value: "良好"
      //     }],
      //     tipText: "新潟县内信息那些信息，新潟县内信息那些信息，新潟县内信息那些信息",
      //     location: {
      //       x: -20083.67578125,
      //       y: 232.38449096679688,
      //       z: 2834.33251953125,
      //     },
      //   },
      // ],
      //所有设备信息数据
      infoPoints: [],
      // 属性类型
      attrType: {
        img: "图片",
        file: "文件",
        text: "文本",
      },
      url: {
        list: "/bim/bimStructureInfo/getTreeList",
      },
      deviceConfig: null,
      alarmConfig: null,
      xsllOption: null,
      fdOption: null,
      //轮播表的配置
      boardConfig: {
        headerBGC: "rgba(31,248,230,0.2)",
        oddRowBGC: "rgba(31,248,230,0.05)",
        evenRowBGC: "rgba(31,248,230,0.1)",
      },
      boardConfig2: {
        headerBGC: "rgba(31,248,230,0.2)",
        oddRowBGC: "rgba(31,248,230,0.05)",
        evenRowBGC: "rgba(31,248,230,0.1)",
      },
    };
  },
  created() {},
  props: {
    ue4Viewer: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {},
  methods: {
    //页面进入时设备信息都取出来放入常量中
    infoPoint() {
      this.infoPoints = deviceinfodatas.rows;
    },
    //树==============================================================================
    // 树结构节点点击触发
    selectNodeHeightLight(selectUe4ids) {
      // 去除高亮
      this.ue4Viewer.unhighlightAll();
      this.selectNodes = selectUe4ids || [];
      this.ue4Viewer.highlight(this.selectNodes);
    },

    expandNode(keys) {
      this.expandedKeys = [];
      this.expandedKeys = keys;
    },
    //树节点点击时调用
    selectNode(val, option) {
      this.removeAllMark();

      if (!val || val.length == 0) {
        return;
      }
      //切换泄水图表数据源
      let datanode = option.title ? option : option.selectedNodes[0].data.props;
      let name = datanode.title;
      let id = val[0];
      let data = [];
      if (
        (name.includes("闸室") || name.includes("弧形工作门")) &&
        name.length > 3
      ) {
        for (let i = 0; i < xsdatas.rows.length; i++) {
          const row = xsdatas.rows[i];
          for (let key in row) {
            if (key == val[0]) {
              data.push(row[key]);
            }
          }
        }
        this.xsllOption.series[0].data = data;
        this.deviceInfo(datanode);
      } else {
        this.removeAllMark();
        this.xsllOption.series[0].data = this.xssumdata;
      }
      //切换发电图表数据源
      if (name.includes("机组") && name.length > 2) {
        this.deviceInfo(datanode);
        if (name == "机组 1#") {
          this.fdOption.series[0].data = this.fddata1;
          this.fdOption.series[1].data = [];
          this.fdOption.series[2].data = [];
          this.fdOption.series[3].data = [];
        }
        if (name == "机组 2#") {
          this.fdOption.series[0].data = [];
          this.fdOption.series[1].data = this.fddata2;
          this.fdOption.series[2].data = [];
          this.fdOption.series[3].data = [];
        }
        if (name == "机组 3#") {
          this.fdOption.series[0].data = [];
          this.fdOption.series[1].data = [];
          this.fdOption.series[2].data = this.fddata3;
          this.fdOption.series[3].data = [];
        }
        if (name == "机组 4#") {
          this.fdOption.series[0].data = [];
          this.fdOption.series[1].data = [];
          this.fdOption.series[2].data = [];
          this.fdOption.series[3].data = this.fddata4;
        }
      } else {
        this.removeAllMark();
        this.fdOption.series[0].data = this.fddata1;
        this.fdOption.series[1].data = this.fddata2;
        this.fdOption.series[2].data = this.fddata3;
        this.fdOption.series[3].data = this.fddata4;
      }
      //船闸弹窗
      if (name == "船闸主体段") {
        this.deviceInfo(datanode);
      } else {
        this.removeAllMark();
      }
    },
    // // 返回节点所有子节点ue4Idval
    // getNodeUe4Id(nodes) {
    //   let list = [];
    //   for (let i in nodes) {
    //     let node = nodes[i];
    //     if (node.ue4Id) list.push(node.ue4Id);
    //     // 存在节点
    //     if (node.child && node.child.length > 0) {
    //       let childList = this.getNodeUe4Id(node.child);
    //       if (childList && childList.length > 0) {
    //         childList.forEach((element) => {
    //           list.push(element);
    //         });
    //       }
    //     }
    //   }
    //   return list;
    // },
    // 根据ue4Id选中树节点
    selectedNodeByue4Id(ue4Id) {
      // 查询id
      let node = this.getIdByUe4Id(this.treeData, ue4Id);
      if (node && node.id) {
        // 选中
        this.selectedKeys = [];
        this.selectedKeys.push(node.id);
        // 展开指定节点
        this.expandedKeys = [];
        let ids = node.path.split("@");
        for (let i in ids) {
          if (ids[i] && ids[i] != "") this.expandedKeys.push(ids[i]);
        }

        node.title = node.name;
        this.selectNode([node.id], node);
      }
      return node;
    },

    // 根据ue4Id查询节点
    // treeData  数据源
    getIdByUe4Id(treeData, ue4Id) {
      let currentNode = {};
      for (let i in treeData) {
        let node = treeData[i];
        if (node.ue4Id == ue4Id) currentNode = node;
        // 找到节点，直接返回
        if (currentNode && currentNode.id) return currentNode;
        // 存在节点
        if (node.child && node.child.length > 0) {
          //递归
          let childNode = this.getIdByUe4Id(node.child, ue4Id);
          if (childNode && childNode.id) {
            currentNode = childNode;
            return currentNode;
          }
        }
      }
    },
    // 根据节点id返回节点对象
    getNodeById(treeData, id) {
      let currentNode = {};
      for (let i in treeData) {
        let node = treeData[i];
        if (node.id == id) {
          currentNode = node;
        }
        // 找到节点，直接返回
        if (currentNode && currentNode.id) return currentNode;
        // 存在节点
        if (node.child && node.child.length > 0) {
          let childNode = this.getNodeById(node.child, id);
          if (childNode && childNode.id) {
            currentNode = childNode;
            return currentNode;
          }
        }
      }
    },

    //点击下方按钮展开树
    treeOpen(treeId) {
      let node = this.getNodeById(this.treeData, treeId);
      if (node && node.id) {
        // 选中
        this.selectedKeys = [];
        this.selectedKeys.push(node.id);
        // 展开指定节点
        this.expandedKeys = [];
        let ids = node.path.split("@");
        for (let i in ids) {
          if (ids[i] && ids[i] != "") this.expandedKeys.push(ids[i]);
        }
      }
    },
    //设备类型切换
    deviceTypeChangeHandle(e) {
      let curele = e.currentTarget;
      let pele = curele.parentElement;

      //切换active 的class
      for (let i = 0; i < pele.childElementCount; i++) {
        const ele = pele.children[i];
        if (ele.classList.contains("active")) {
          if (ele != curele) {
            ele.classList.remove("active");
          }
        } else {
          if (ele === curele) {
            ele.classList.add("active");
          }
        }
      }
      //切换数据
      let text = curele.getAttribute("data-id");
      //泄水闸
      if (text === "1") {
        let param = {
          location: {
            x: 8260.7119140625,
            y: 4693.53076171875,
            z: 4330.76318359375,
          },
          pitch: -10.173401832580566,
          yaw: -90.02466583251953,
        };
        this.ue4Viewer.flytoByParam(param);
        let treeId = "1582617295705944070";
        this.treeOpen(treeId);
      }
      //船闸
      if (text === "2") {
        let param = {
          location: {
            x: -20228.515625,
            y: -1680.5927734375,
            z: 4485.25341796875,
          },
          pitch: -18.071224212646484,
          yaw: 90.2226791381836,
        };
        this.ue4Viewer.flytoByParam(param);
        let treeId = "1582617296490278929";
        this.treeOpen(treeId);
      }
      //水轮发电机组
      if (text === "3") {
        let param = {
          location: {
            x: -2140.673828125,
            y: 3441.97607421875,
            z: 2471.384521484375,
          },
          pitch: -14.746944427490234,
          yaw: -87.48992156982422,
        };
        this.ue4Viewer.flytoByParam(param);
        let treeId = "1582617296490278916";
        this.treeOpen(treeId);
      }
    },

    //初始化树节点的数据
    loadTreeData() {
      this.loading = true;
      let params = {};

      let res = modeldatas;
      if (res.success) {
        this.treeData = res.result;
      } else {
        this.$message.warning(res.message);
      }
    },

    //页面的默认加载事件
    initPage() {
      setTimeout(() => {
        this.initDevice();
        this.initAlarm();
        this.initXsllOption();
        this.initFdOption();
        //加载树数据
        this.loadTreeData();
        // if (this.ue4Viewer && Object.keys(this.ue4Viewer).length != 0) {
        //   this.ue4Viewer.setSelectedNodeByue4Id(this.selectedNodeByue4Id);
        // }
        //类型切换
        this.$refs["item1"].click();
      }, 0);
      this.infoPoint();
      if (this.ue4Viewer && Object.keys(this.ue4Viewer).length != 0) {
        this.ue4Viewer.setSelectedNodeByue4Id(this.selectedNodeByue4Id);
      }
    },
    initDevice() {
      let data = [];
      for (let i = 0; i < devicedatas.rows.length; i++) {
        const row = devicedatas.rows[i];
        data.push([row.name, row.state, row.content]);
      }
      let config = {
        rowNum: 6,
        headerHeight: 30,
        header: ["设备名称", "状态", "描述"],
        columnWidth: [90, 60],
        // columnWidth:[2][200],
        data: data,
      };
      this.deviceConfig = Object.assign(this.boardConfig2, config);
    },
    initAlarm() {
      let data = [];
      let content;
      for (let i = 0; i < alarmdatas.rows.length; i++) {
        const row = alarmdatas.rows[i];
        if (row.content.includes("无法自动关闭")) {
          content = '<span style="color:#FF0000;">' + row.content + "</span>";
          data.push([row.time, row.events, content]);
        } else {
          data.push([row.time, row.events, row.content]);
        }
      }
      let config = {
        rowNum: 5,
        headerHeight: 30,
        columnWidth: [150, 80],
        header: ["时间", "事件", "描述"],
        data: data,
      };
      // console.log("config.data[3].content", config.data);
      // config.data[3].content;
      this.alarmConfig = Object.assign(this.boardConfig, config);
    },
    //泄水流量
    initXsllOption() {
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: 15,
          right: 20,
          top: 35,
          bottom: 10,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
          name: "单位（m³/s）",
          nameTextStyle: {
            color: "rgba(245, 238, 238, 1)",
          },
        },
        series: [
          {
            data: [],
            type: "bar",
          },
        ],
      };
      let xdata = [];
      let ydata = [];
      //初始进来数据是总数据
      for (let i = 0; i < xsdatas.rows.length; i++) {
        const row = xsdatas.rows[i];
        xdata.push(row.time);
        ydata.push(row.sum);
      }
      this.xssumdata = ydata;
      option.xAxis.data = xdata;
      option.series[0].data = ydata;

      this.xsllOption = option;
    },
    //初始化发电流量
    initFdOption() {
      let legendData = ["发电机组1", "发电机组2", "发电机组3", "发电机组4"];
      let option = {
        title: {
          // text: "Stacked Line",
          show: false,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          show: false,
          data: legendData,
          // selectde:{
          //   "发电流量1":false
          // },
          // top: "4%",
          textStyle: {
            color: "#FDFDFC",
          },
        },
        grid: {
          left: 25,
          right: 20,
          top: 35,
          bottom: 10,
          containLabel: true,
        },
        toolbox: {
          feature: {
            // saveAsImage: {},
          },
        },
        dataZoom: {
          type: "inside",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLine: {
            // x轴样式
            lineStyle: {
              color: "#99A0A8",
            },
          },
          axisLabel: {
            color: "#99A0A8",
            formatter: function (value) {
              let labels = value.split(" ");
              if (labels.length > 0) {
                return labels.join("\n");
              } else value;
            },
          },
        },
        yAxis: {
          type: "value",
          name: "单位(万kwh)",
          nameTextStyle: {
            color: "rgba(245, 238, 238, 1)",
          },
          nameLocation: "end",
          axisLabel: {
            color: "#99A0A8",
          },
          //分隔线
          splitLine: {
            show: true,
            lineStyle: {
              color: "#99A0A8",
            },
          },
        },
        series: [
          {
            name: legendData[0],
            type: "line",
            smooth: true, //变为曲线 默认false折线
            symbolSize: 0, //去掉页面上显示的圆点
            data: [],
            // lineStyle: {
            //   width: 0, // 线宽是0
            //   color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
            // },
          },
          {
            name: legendData[1],
            type: "line",
            smooth: true, //变为曲线 默认false折线
            symbolSize: 0, //去掉页面上显示的圆点
            data: [],
            // lineStyle: {
            //   width: 0, // 线宽是0
            //   color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
            // },
          },
          {
            name: legendData[2],
            type: "line",
            smooth: true, //变为曲线 默认false折线
            symbolSize: 0, //去掉页面上显示的圆点
            data: [],
            // lineStyle: {
            //   width: 0, // 线宽是0
            //   color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
            // },
          },
          {
            name: legendData[3],
            type: "line",
            smooth: true, //变为曲线 默认false折线
            symbolSize: 0, //去掉页面上显示的圆点
            data: [],
            // lineStyle: {
            //   width: 0, // 线宽是0
            //   color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
            // },
          },
        ],
      };

      let xAxisData = [];
      let downData = [];
      let downData2 = [];
      let downData3 = [];
      let downData4 = [];

      for (let i = 0; i < fddatas.rows.length; i++) {
        const row = fddatas.rows[i];
        for (let j = 0; j < row.length; j++) {
          if (i == 0) {
            xAxisData.push(row[j].time);
            if (row[j].value) {
              downData.push(parseFloat(row[j].value));
            } else {
              downData.push(null);
            }
          }
          if (i == 1) {
            if (row[j].value) {
              downData2.push(parseFloat(row[j].value));
            } else {
              downData2.push(null);
            }
          }
          if (i == 2) {
            if (row[j].value) {
              downData3.push(parseFloat(row[j].value));
            } else {
              downData3.push(null);
            }
          }
          if (i == 3) {
            if (row[j].value) {
              downData4.push(parseFloat(row[j].value));
            } else {
              downData4.push(null);
            }
          }
        }
        if (i >= 1000) {
          break;
        }
      }
      this.fddata1 = downData;
      this.fddata2 = downData2;
      this.fddata3 = downData3;
      this.fddata4 = downData4;
      //处理y轴最大、最小值
      // let max1 = Math.max(...downData);
      // let min1 = Math.min(...downData);

      // let max = Math.ceil(max1 * 1.1 * 100) / 100;
      // let min = Math.floor(min1 * 0.9 * 100) / 100;
      // console.log(option, max1, min1, max, min);

      // option.yAxis.min = min;
      // option.yAxis.max = max;
      option.xAxis.data = xAxisData;
      option.series[0].data = downData;
      option.series[1].data = downData2;
      option.series[2].data = downData3;
      option.series[3].data = downData4;
      this.fdOption = option;
    },
    //移除所有标签
    removeAllMark() {
      this.ue4Viewer.removeAllMark();
    },
    //新增标签
    deviceInfo(data) {
      this.removeAllMark();
      if (data) {
        let task = this.infoPoints.find((x) => x.id === data.id);
        if (task) {
          //新增信息框
          let d = {
            id: task.id + "_list",
            title: task.title,
            // objectid: data.ue4Id,
            // location: task.location,
            valueColor: "#ff0000cc",
            list: task.list,
            tipText: task.tipText,
          };
          if (data.ue4Id) {
            d.objectid = data.ue4Id;
          } else {
            d.location = task.location;
          }
          let a = [];
          a.push(d);
          console.log("aaaaaaaaaaa", a);
          let p = {
            type: "list",
            scale: 1,
            offset: { x: 0, y: 0 },
            clickable: true,
            config: a,
            backgroundUrl: this.bgIconUrl,
          };
          setTimeout(() => {
            this.ue4Viewer.addUpdateLabel(p);
          });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-tree.ant-tree-icon-hide {
  text-align: left;
}

#device-main-container {
  .mc-left,
  .mc-right {
    visibility: visible;
    width: 476px;
    height: 100%;
    padding-top: 15px;

    .mc-left-sub {
      // height: 25%;
      width: calc(100% - 20px);
      // margin-top: 25px;
      // margin-top: 2.5304%;
      margin-left: 20px;
      padding-bottom: 20px;
      position: relative;

      .sub-top {
        height: 46px;
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;

        h3 {
          color: #fff;
          margin: 0;
          padding-left: 40px;
          padding-top: 8px;
          font-weight: normal;
          text-align: left;
        }
      }

      .sub-bottom {
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: cover;
        height: calc(100% - -210px);
      }
    }

    .mc-left-1 {
      height: 24.7214%;
      margin-top: 5px;
      margin-left: 20px;

      .sub-top {
        background-image: url(../../assets/svg/BlockBg2.svg);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100%;
        height: calc(100% - 5px);
        display: flex;

        .wc-left,
        .wc-center,
        .wc-right {
          .icon {
            width: 70px;
            height: 58px;
            margin: 25% auto 10px auto;
            // margin-left: 54px;
            // // margin-top: 6px;
            // margin-top: calc(50% - 83px); //(100% + 30 - 136)/2 - 30
            background-image: url(../../assets/svg/icon1-1.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
      }

      .sub-bottom {
        background-image: url(../../assets/svg/BlockBg2.svg);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100%;
        height: 5px;
        display: flex;
      }
    }

    .mc-left-2,
    .mc-left-3 {
      height: 37.4873%;

      .sub-bottom {
        height: calc(100% - 44px);

        .dv-scroll-board {
          margin-left: 30px;
          height: calc(100% - 15px);
          width: calc(100% - 50px);
        }
      }
    }
  }

  .mc-left {
    .mc-left-1 {
      .wc {
        height: 100%;
        width: 33.33%;
      }

      .wc-line {
        // width: 1px;
        // height: 180px;
        background: url(../../assets/svg/line.svg);
        background-position: 75px 50px;
        background-repeat: no-repeat;
        background-size: 100% 60%;
      }

      .sub-top {
        background-image: url(../../assets/svg/BlockBg2.svg);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100%;
        height: calc(100% - 5px);
        display: flex;

        .wc-left,
        .wc-center,
        .wc-right {
          .icon {
            width: 70px;
            height: 58px;
            margin: 25% auto 10px auto;
            // margin-left: 54px;
            // // margin-top: 6px;
            // margin-top: calc(50% - 83px); //(100% + 30 - 136)/2 - 30
            background-image: url(../../assets/svg/icon1-1.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
          }

          .text {
            font-size: 18px;
            height: 20px;
            display: block;
          }

          .num {
            font-size: 28px;
            display: block;
            color: #1ff8e6;
          }
        }

        .wc-center {
          .icon {
            background-image: url(../../assets/svg/icon2-1.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
          }
        }

        .wc-right {
          .icon {
            background-image: url(../../assets/svg/icon3-1.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
      }

      .sub-bottom {
        background-image: url(../../assets/svg/BlockBg2.svg);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100%;
        height: 5px;
        display: flex;
      }
    }
  }

  .mc-center {
    visibility: visible;
    width: 260px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    max-height: 100%;
    overflow-y: auto;
  }

  .mc-right {
    position: absolute;
    right: 0px;
    padding-right: 20px;

    .mc-left-1 {
      .sub-top {
        display: block;
        // padding: 11.2108% 17.9372%;
        padding: 5.2108% 8.9372%;
        // padding: 25px 40px;

        .wc-top {
          height: 48.28%;

          .icon {
            // height: 82px;
            height: 100%;
            width: 100%;
            background-image: url(../../assets/svg/Total01.svg);
            background-position: left;
            background-repeat: no-repeat;
            background-size: contain;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .text {
              font-size: 24px;
              color: #ffffff;
              // line-height: 82px;
              // margin-left: 100px;
              margin-left: 28%;
            }

            .num {
              font-size: 36px;
              color: #1ff8e6;
              line-height: 82px;
            }
          }
        }

        .wc-bottom {
          margin-top: 15px;
          height: 48.28%;

          .icon {
            height: 100%;
            width: 100%;
            background-image: url(../../assets/svg/Total02.svg);
            background-position: left;
            background-repeat: no-repeat;
            background-size: contain;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .text {
              font-size: 24px;
              color: #ffffff;
              // line-height: 82px;
              // margin-left: 100px;
              margin-left: 28%;
            }

            .num {
              font-size: 36px;
              color: #ff7e00;
              line-height: 82px;
            }
          }
        }
      }
    }
  }

  .mc-bottom {
    position: absolute;
    bottom: 0px;
    height: auto !important;
    width: 100% !important;
    justify-content: center;

    .type-item {
      background-image: url(../../assets/svg/Button2-1.svg);
      background-position: bottom;
      background-repeat: no-repeat;
      background-size: 100%;
      visibility: visible;
      height: 52px;
      width: 140px;
      margin-left: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      cursor: pointer;

      &.active {
        background-image: url(../../assets/svg/Button2-2.svg);
      }
    }

    .type-item-3 {
      width: 200px;
      background-image: unset;
      justify-content: flex-start;
      position: relative;

      .item-left {
        width: 100px;
        height: 100%;
        background-image: url(../../assets/svg/Button2-1.svg);
        background-position: left;
        background-size: cover;
        background-repeat: no-repeat;
      }

      .item-right {
        width: 100px;
        height: 100%;
        background-image: url(../../assets/svg/Button2-1.svg);
        background-position: right;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        position: initial;

        .text {
          white-space: nowrap;
          position: absolute;
          left: 40px;
        }
      }

      &.active {
        background-image: unset;

        .item-left {
          background-image: url(../../assets/svg/Button2-2.svg);
        }

        .item-right {
          background-image: url(../../assets/svg/Button2-2.svg);
        }
      }
    }
  }
}
</style>
<style lang="less">
#safe-main-container {
  .search {
    .ant-calendar-picker {
      margin-top: 3px;
      width: 200px;

      .ant-input {
        background-color: #fff0;
        border: none;
      }

      .ant-calendar-picker-clear {
        background-color: #fff0;
        color: #fff;
        margin-left: 2px;
        right: 5px;
      }
    }
  }
}
</style>